<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据统计 - 1024导航后台</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#10B981',
                        accent: '#F59E0B',
                        dark: '#1F2937',
                        light: '#F9FAFB',
                        danger: '#EF4444'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-hover {
                @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
            }
            .sidebar-active {
                @apply bg-primary/10 text-primary border-l-4 border-primary;
            }
            .stat-card {
                @apply bg-white rounded-xl shadow-sm p-5 transition-all duration-300 hover:shadow-md;
            }
        }
    </style>
</head>

<body class="bg-gray-50 font-sans text-gray-800 flex h-screen overflow-hidden">
    <!-- 侧边栏 -->
    <aside
        class="w-64 bg-white shadow-sm h-full border-r border-gray-200 flex-shrink-0 hidden md:block overflow-y-auto">
        <div class="p-5 border-b border-gray-200">
            <div class="text-primary text-xl font-bold">1024<span class="text-secondary">导航</span></div>
            <p class="text-xs text-gray-500 mt-1">管理员后台</p>
        </div>

        <nav class="p-4">
            <p class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3 px-3">主菜单</p>
            <ul class="space-y-1">
                <li>
                    <a href="admin_index.html"
                        class="flex items-center px-3 py-3 text-sm text-gray-700 hover:bg-gray-50 rounded-md transition-colors">
                        <i class="fa fa-tachometer w-5 text-center mr-3"></i>
                        <span>控制台</span>
                    </a>
                </li>
                <li>
                    <a href="admin_resource_manager.html"
                        class="flex items-center px-3 py-3 text-sm text-gray-700 hover:bg-gray-50 rounded-md transition-colors">
                        <i class="fa fa-th-large w-5 text-center mr-3"></i>
                        <span>资源管理</span>
                    </a>
                </li>
                <li>
                    <a href="#"
                        class="flex items-center px-3 py-3 text-sm text-gray-700 hover:bg-gray-50 rounded-md transition-colors">
                        <i class="fa fa-wrench w-5 text-center mr-3"></i>
                        <span>工具管理</span>
                    </a>
                </li>
                <li>
                    <a href="#"
                        class="flex items-center px-3 py-3 text-sm text-gray-700 hover:bg-gray-50 rounded-md transition-colors">
                        <i class="fa fa-users w-5 text-center mr-3"></i>
                        <span>用户管理</span>
                    </a>
                </li>
                <li>
                    <a href="#"
                        class="flex items-center px-3 py-3 text-sm text-gray-700 hover:bg-gray-50 rounded-md transition-colors">
                        <i class="fa fa-comments w-5 text-center mr-3"></i>
                        <span>社区内容</span>
                    </a>
                </li>
                <li>
                    <a href="#" class="sidebar-active flex items-center px-3 py-3 text-sm rounded-md">
                        <i class="fa fa-bar-chart w-5 text-center mr-3"></i>
                        <span>数据统计</span>
                    </a>
                </li>
            </ul>

            <p class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3 px-3 mt-8">系统设置</p>
            <ul class="space-y-1">
                <li>
                    <a href="#"
                        class="flex items-center px-3 py-3 text-sm text-gray-700 hover:bg-gray-50 rounded-md transition-colors">
                        <i class="fa fa-cog w-5 text-center mr-3"></i>
                        <span>网站设置</span>
                    </a>
                </li>
                <li>
                    <a href="#"
                        class="flex items-center px-3 py-3 text-sm text-gray-700 hover:bg-gray-50 rounded-md transition-colors">
                        <i class="fa fa-shield w-5 text-center mr-3"></i>
                        <span>安全设置</span>
                    </a>
                </li>
                <li>
                    <a href="#"
                        class="flex items-center px-3 py-3 text-sm text-gray-700 hover:bg-gray-50 rounded-md transition-colors">
                        <i class="fa fa-bell w-5 text-center mr-3"></i>
                        <span>通知管理</span>
                    </a>
                </li>
                <li>
                    <a href="#"
                        class="flex items-center px-3 py-3 text-sm text-gray-700 hover:bg-gray-50 rounded-md transition-colors">
                        <i class="fa fa-history w-5 text-center mr-3"></i>
                        <span>操作日志</span>
                    </a>
                </li>
            </ul>
        </nav>
    </aside>

    <!-- 主内容区 -->
    <div class="flex-1 flex flex-col overflow-hidden">
        <!-- 顶部导航 -->
        <header class="bg-white shadow-sm h-16 border-b border-gray-200 flex items-center justify-between px-6">
            <div class="flex items-center">
                <button class="md:hidden mr-4 text-gray-600">
                    <i class="fa fa-bars text-xl"></i>
                </button>
                <h1 class="text-lg font-semibold">数据统计</h1>
            </div>

            <div class="flex items-center space-x-4">
                <div class="relative">
                    <button class="text-gray-600 hover:text-primary transition-colors relative">
                        <i class="fa fa-bell text-xl"></i>
                        <span
                            class="absolute -top-1 -right-1 w-4 h-4 bg-danger rounded-full text-white text-xs flex items-center justify-center">3</span>
                    </button>
                </div>

                <div class="relative group">
                    <button class="flex items-center space-x-2">
                        <img src="https://picsum.photos/id/1005/40/40" alt="管理员头像"
                            class="w-8 h-8 rounded-full object-cover">
                        <span class="text-sm font-medium hidden md:inline-block">管理员</span>
                        <i class="fa fa-angle-down text-gray-500"></i>
                    </button>
                    <div
                        class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg py-2 z-10 hidden group-hover:block">
                        <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">个人资料</a>
                        <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">账号设置</a>
                        <div class="border-t border-gray-100 my-1"></div>
                        <a href="#" class="block px-4 py-2 text-sm text-red-600 hover:bg-gray-100">退出登录</a>
                    </div>
                </div>
            </div>
        </header>

        <!-- 页面内容 -->
        <main class="flex-1 overflow-y-auto p-6 bg-gray-50">
            <!-- 数据筛选器 -->
            <div class="bg-white rounded-xl shadow-sm p-5 mb-6">
                <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
                    <div class="flex flex-wrap gap-3">
                        <div class="flex items-center">
                            <label class="text-sm text-gray-600 mr-2">时间范围:</label>
                            <select
                                class="px-3 py-1.5 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                                <option>今日</option>
                                <option>昨日</option>
                                <option selected>近7天</option>
                                <option>近30天</option>
                                <option>本月</option>
                                <option>上月</option>
                                <option>自定义</option>
                            </select>
                        </div>

                        <div class="flex items-center">
                            <label class="text-sm text-gray-600 mr-2">数据维度:</label>
                            <select
                                class="px-3 py-1.5 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                                <option selected>全部数据</option>
                                <option>资源相关</option>
                                <option>用户相关</option>
                                <option>访问相关</option>
                            </select>
                        </div>
                    </div>

                    <div class="flex gap-3">
                        <button
                            class="px-4 py-1.5 text-sm border border-gray-300 rounded-md hover:bg-gray-50 transition-colors">
                            <i class="fa fa-download mr-1"></i> 导出数据
                        </button>
                        <button
                            class="px-4 py-1.5 text-sm bg-primary text-white rounded-md hover:bg-primary/90 transition-colors">
                            <i class="fa fa-refresh mr-1"></i> 刷新数据
                        </button>
                    </div>
                </div>
            </div>

            <!-- 核心数据指标 -->
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
                <div class="stat-card">
                    <div class="flex items-center justify-between mb-4">
                        <p class="text-gray-500 text-sm">总访问量</p>
                        <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary">
                            <i class="fa fa-eye"></i>
                        </div>
                    </div>
                    <div class="flex items-end justify-between">
                        <div>
                            <h3 class="text-2xl font-bold">42,856</h3>
                            <p class="text-secondary text-xs flex items-center mt-1">
                                <i class="fa fa-arrow-up mr-1"></i> 12.5% 较上周
                            </p>
                        </div>
                    </div>
                </div>

                <div class="stat-card">
                    <div class="flex items-center justify-between mb-4">
                        <p class="text-gray-500 text-sm">独立访客</p>
                        <div
                            class="w-10 h-10 rounded-full bg-secondary/10 flex items-center justify-center text-secondary">
                            <i class="fa fa-user"></i>
                        </div>
                    </div>
                    <div class="flex items-end justify-between">
                        <div>
                            <h3 class="text-2xl font-bold">8,642</h3>
                            <p class="text-secondary text-xs flex items-center mt-1">
                                <i class="fa fa-arrow-up mr-1"></i> 8.3% 较上周
                            </p>
                        </div>
                    </div>
                </div>

                <div class="stat-card">
                    <div class="flex items-center justify-between mb-4">
                        <p class="text-gray-500 text-sm">资源点击量</p>
                        <div class="w-10 h-10 rounded-full bg-accent/10 flex items-center justify-center text-accent">
                            <i class="fa fa-mouse-pointer"></i>
                        </div>
                    </div>
                    <div class="flex items-end justify-between">
                        <div>
                            <h3 class="text-2xl font-bold">15,327</h3>
                            <p class="text-danger text-xs flex items-center mt-1">
                                <i class="fa fa-arrow-down mr-1"></i> 2.1% 较上周
                            </p>
                        </div>
                    </div>
                </div>

                <div class="stat-card">
                    <div class="flex items-center justify-between mb-4">
                        <p class="text-gray-500 text-sm">平均停留时间</p>
                        <div class="w-10 h-10 rounded-full bg-danger/10 flex items-center justify-center text-danger">
                            <i class="fa fa-clock-o"></i>
                        </div>
                    </div>
                    <div class="flex items-end justify-between">
                        <div>
                            <h3 class="text-2xl font-bold">4:25</h3>
                            <p class="text-secondary text-xs flex items-center mt-1">
                                <i class="fa fa-arrow-up mr-1"></i> 1.2分钟 较上周
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 图表区域 -->
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
                <!-- 访问趋势图表 -->
                <div class="lg:col-span-2 bg-white rounded-xl shadow-sm p-6">
                    <div class="flex justify-between items-center mb-6">
                        <h2 class="font-bold text-lg">访问趋势分析</h2>
                        <div class="flex space-x-2">
                            <button
                                class="px-3 py-1 text-xs bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 transition-colors">日</button>
                            <button class="px-3 py-1 text-xs bg-primary text-white rounded-md">周</button>
                            <button
                                class="px-3 py-1 text-xs bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 transition-colors">月</button>
                            <button
                                class="px-3 py-1 text-xs bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 transition-colors">年</button>
                        </div>
                    </div>
                    <div class="h-80">
                        <canvas id="visitsTrendChart"></canvas>
                    </div>
                </div>

                <!-- 访问来源分布 -->
                <div class="bg-white rounded-xl shadow-sm p-6">
                    <div class="flex justify-between items-center mb-6">
                        <h2 class="font-bold text-lg">访问来源分布</h2>
                        <button class="text-gray-500 hover:text-primary transition-colors">
                            <i class="fa fa-ellipsis-v"></i>
                        </button>
                    </div>
                    <div class="h-64 mb-6">
                        <canvas id="trafficSourceChart"></canvas>
                    </div>
                    <div class="space-y-3">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center">
                                <div class="w-3 h-3 rounded-full bg-primary mr-2"></div>
                                <span class="text-sm">直接访问</span>
                            </div>
                            <span class="text-sm font-medium">45%</span>
                        </div>
                        <div class="flex items-center justify-between">
                            <div class="flex items-center">
                                <div class="w-3 h-3 rounded-full bg-secondary mr-2"></div>
                                <span class="text-sm">搜索引擎</span>
                            </div>
                            <span class="text-sm font-medium">30%</span>
                        </div>
                        <div class="flex items-center justify-between">
                            <div class="flex items-center">
                                <div class="w-3 h-3 rounded-full bg-accent mr-2"></div>
                                <span class="text-sm">外部链接</span>
                            </div>
                            <span class="text-sm font-medium">15%</span>
                        </div>
                        <div class="flex items-center justify-between">
                            <div class="flex items-center">
                                <div class="w-3 h-3 rounded-full bg-purple-500 mr-2"></div>
                                <span class="text-sm">社交媒体</span>
                            </div>
                            <span class="text-sm font-medium">10%</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 第二行图表 -->
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
                <!-- 资源分类访问 -->
                <div class="bg-white rounded-xl shadow-sm p-6">
                    <div class="flex justify-between items-center mb-6">
                        <h2 class="font-bold text-lg">资源分类访问量</h2>
                        <div class="flex space-x-2">
                            <button class="px-3 py-1 text-xs bg-primary text-white rounded-md">点击量</button>
                            <button
                                class="px-3 py-1 text-xs bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 transition-colors">转化率</button>
                        </div>
                    </div>
                    <div class="h-72">
                        <canvas id="resourceCategoryChart"></canvas>
                    </div>
                </div>

                <!-- 用户增长趋势 -->
                <div class="bg-white rounded-xl shadow-sm p-6">
                    <div class="flex justify-between items-center mb-6">
                        <h2 class="font-bold text-lg">用户增长趋势</h2>
                        <div class="flex space-x-2">
                            <button
                                class="px-3 py-1 text-xs bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 transition-colors">日</button>
                            <button class="px-3 py-1 text-xs bg-primary text-white rounded-md">周</button>
                            <button
                                class="px-3 py-1 text-xs bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 transition-colors">月</button>
                        </div>
                    </div>
                    <div class="h-72">
                        <canvas id="userGrowthChart"></canvas>
                    </div>
                </div>
            </div>

            <!-- 热门资源表格 -->
            <div class="bg-white rounded-xl shadow-sm overflow-hidden mb-8">
                <div class="p-6 border-b border-gray-100">
                    <div class="flex justify-between items-center">
                        <h2 class="font-bold text-lg">热门资源排行</h2>
                        <a href="#" class="text-primary text-sm hover:underline">查看全部</a>
                    </div>
                </div>
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50">
                            <tr>
                                <th scope="col"
                                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    排名</th>
                                <th scope="col"
                                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    资源名称</th>
                                <th scope="col"
                                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    分类</th>
                                <th scope="col"
                                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    点击量</th>
                                <th scope="col"
                                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    周环比</th>
                                <th scope="col"
                                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    收藏数</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            <tr class="hover:bg-gray-50 transition-colors">
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center">
                                        <span class="text-sm font-medium text-gray-900">1</span>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center">
                                        <div
                                            class="w-8 h-8 rounded bg-blue-100 flex items-center justify-center text-primary mr-3">
                                            <i class="fa fa-code"></i>
                                        </div>
                                        <div>
                                            <div class="font-medium text-gray-900">在线代码编辑器</div>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">开发工具</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                    <i class="fa fa-fire text-orange-500 mr-1"></i> 12.5k
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="text-green-600 text-sm flex items-center">
                                        <i class="fa fa-arrow-up mr-1"></i> 8.2%
                                    </span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">3.2k</td>
                            </tr>
                            <tr class="hover:bg-gray-50 transition-colors">
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center">
                                        <span class="text-sm font-medium text-gray-900">2</span>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center">
                                        <div
                                            class="w-8 h-8 rounded bg-purple-100 flex items-center justify-center text-purple-600 mr-3">
                                            <i class="fa fa-paint-brush"></i>
                                        </div>
                                        <div>
                                            <div class="font-medium text-gray-900">免费UI设计模板</div>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">设计资源</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                    <i class="fa fa-fire text-orange-500 mr-1"></i> 9.8k
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="text-green-600 text-sm flex items-center">
                                        <i class="fa fa-arrow-up mr-1"></i> 5.7%
                                    </span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">4.1k</td>
                            </tr>
                            <tr class="hover:bg-gray-50 transition-colors">
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center">
                                        <span class="text-sm font-medium text-gray-900">3</span>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center">
                                        <div
                                            class="w-8 h-8 rounded bg-green-100 flex items-center justify-center text-green-600 mr-3">
                                            <i class="fa fa-book"></i>
                                        </div>
                                        <div>
                                            <div class="font-medium text-gray-900">Python数据分析教程</div>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">学习教育</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                    <i class="fa fa-fire text-orange-500 mr-1"></i> 8.3k
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="text-red-600 text-sm flex items-center">
                                        <i class="fa fa-arrow-down mr-1"></i> 2.3%
                                    </span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2.7k</td>
                            </tr>
                            <tr class="hover:bg-gray-50 transition-colors">
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center">
                                        <span class="text-sm font-medium text-gray-900">4</span>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center">
                                        <div
                                            class="w-8 h-8 rounded bg-amber-100 flex items-center justify-center text-amber-600 mr-3">
                                            <i class="fa fa-file-pdf-o"></i>
                                        </div>
                                        <div>
                                            <div class="font-medium text-gray-900">在线PDF转换</div>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">工具资源</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                    <i class="fa fa-fire text-orange-500 mr-1"></i> 7.6k
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="text-green-600 text-sm flex items-center">
                                        <i class="fa fa-arrow-up mr-1"></i> 12.1%
                                    </span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1.8k</td>
                            </tr>
                            <tr class="hover:bg-gray-50 transition-colors">
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center">
                                        <span class="text-sm font-medium text-gray-900">5</span>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center">
                                        <div
                                            class="w-8 h-8 rounded bg-red-100 flex items-center justify-center text-red-600 mr-3">
                                            <i class="fa fa-image"></i>
                                        </div>
                                        <div>
                                            <div class="font-medium text-gray-900">图片压缩工具</div>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">工具资源</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                    <i class="fa fa-fire text-orange-500 mr-1"></i> 6.9k
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="text-green-600 text-sm flex items-center">
                                        <i class="fa fa-arrow-up mr-1"></i> 3.5%
                                    </span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1.5k</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="p-4 border-t border-gray-100 flex items-center justify-between">
                    <div class="text-sm text-gray-500">显示 1 至 5 条，共 24 条</div>
                    <div class="flex items-center space-x-1">
                        <button
                            class="px-3 py-1 text-sm border border-gray-300 rounded-md bg-white text-gray-500 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
                            disabled>
                            <i class="fa fa-angle-left"></i>
                        </button>
                        <button
                            class="px-3 py-1 text-sm border border-primary bg-primary text-white rounded-md">1</button>
                        <button
                            class="px-3 py-1 text-sm border border-gray-300 rounded-md bg-white text-gray-700 hover:bg-gray-50">2</button>
                        <button
                            class="px-3 py-1 text-sm border border-gray-300 rounded-md bg-white text-gray-700 hover:bg-gray-50">3</button>
                        <button
                            class="px-3 py-1 text-sm border border-gray-300 rounded-md bg-white text-gray-700 hover:bg-gray-50">4</button>
                        <button
                            class="px-3 py-1 text-sm border border-gray-300 rounded-md bg-white text-gray-700 hover:bg-gray-50">5</button>
                        <button
                            class="px-3 py-1 text-sm border border-gray-300 rounded-md bg-white text-gray-700 hover:bg-gray-50">
                            <i class="fa fa-angle-right"></i>
                        </button>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <!-- 回到顶部按钮 -->
    <button id="backToTop"
        class="fixed bottom-6 right-6 w-12 h-12 rounded-full bg-primary text-white shadow-lg flex items-center justify-center opacity-0 invisible transition-all duration-300">
        <i class="fa fa-arrow-up"></i>
    </button>

    <script>
        // 回到顶部按钮功能
        const backToTopBtn = document.getElementById('backToTop');

        window.addEventListener('scroll', () => {
            if (window.scrollY > 300) {
                backToTopBtn.classList.remove('opacity-0', 'invisible');
                backToTopBtn.classList.add('opacity-100', 'visible');
            } else {
                backToTopBtn.classList.remove('opacity-100', 'visible');
                backToTopBtn.classList.add('opacity-0', 'invisible');
            }
        });

        backToTopBtn.addEventListener('click', () => {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });

        // 初始化图表
        document.addEventListener('DOMContentLoaded', function () {
            // 访问趋势图表
            const visitsTrendCtx = document.getElementById('visitsTrendChart').getContext('2d');
            const visitsTrendChart = new Chart(visitsTrendCtx, {
                type: 'line',
                data: {
                    labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                    datasets: [{
                        label: '访问量',
                        data: [5200, 6100, 5800, 6500, 7200, 8900, 8200],
                        borderColor: '#3B82F6',
                        backgroundColor: 'rgba(59, 130, 246, 0.1)',
                        tension: 0.4,
                        fill: true
                    }, {
                        label: '独立访客',
                        data: [1200, 1400, 1350, 1500, 1650, 1900, 1750],
                        borderColor: '#10B981',
                        backgroundColor: 'rgba(16, 185, 129, 0.1)',
                        tension: 0.4,
                        fill: true
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'top',
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });

            // 访问来源饼图
            const trafficSourceCtx = document.getElementById('trafficSourceChart').getContext('2d');
            const trafficSourceChart = new Chart(trafficSourceCtx, {
                type: 'doughnut',
                data: {
                    labels: ['直接访问', '搜索引擎', '外部链接', '社交媒体'],
                    datasets: [{
                        data: [45, 30, 15, 10],
                        backgroundColor: [
                            '#3B82F6',
                            '#10B981',
                            '#F59E0B',
                            '#8B5CF6'
                        ],
                        borderWidth: 0
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    cutout: '70%',
                    plugins: {
                        legend: {
                            display: false
                        }
                    }
                }
            });

            // 资源分类访问图表
            const resourceCategoryCtx = document.getElementById('resourceCategoryChart').getContext('2d');
            const resourceCategoryChart = new Chart(resourceCategoryCtx, {
                type: 'bar',
                data: {
                    labels: ['开发工具', '学习教育', '设计资源', '工具资源', '文档资料', '其他'],
                    datasets: [{
                        label: '点击量',
                        data: [12500, 9800, 8300, 7600, 5200, 3800],
                        backgroundColor: [
                            'rgba(59, 130, 246, 0.7)',
                            'rgba(16, 185, 129, 0.7)',
                            'rgba(245, 158, 11, 0.7)',
                            'rgba(239, 68, 68, 0.7)',
                            'rgba(139, 92, 246, 0.7)',
                            'rgba(156, 163, 175, 0.7)'
                        ],
                        borderRadius: 4
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });

            // 用户增长趋势图表
            const userGrowthCtx = document.getElementById('userGrowthChart').getContext('2d');
            const userGrowthChart = new Chart(userGrowthCtx, {
                type: 'line',
                data: {
                    labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                    datasets: [{
                        label: '新增用户',
                        data: [120, 156, 132, 189, 210, 256, 230],
                        borderColor: '#3B82F6',
                        backgroundColor: 'rgba(59, 130, 246, 0.1)',
                        tension: 0.4,
                        fill: true
                    }, {
                        label: '活跃用户',
                        data: [850, 920, 890, 980, 1050, 1200, 1150],
                        borderColor: '#10B981',
                        backgroundColor: 'rgba(16, 185, 129, 0.1)',
                        tension: 0.4,
                        fill: true
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'top',
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });
        });

        // 移动端侧边栏切换
        const menuButton = document.querySelector('button.md\\:hidden');
        const sidebar = document.querySelector('aside');

        menuButton.addEventListener('click', function () {
            sidebar.classList.toggle('hidden');
            sidebar.classList.toggle('fixed');
            sidebar.classList.toggle('z-50');
            sidebar.classList.toggle('w-64');
        });
    </script>
</body>

</html>